{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Bootstrap Table{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/js/tables/bootstrap-table/bootstrap-table.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/tables/bootstrap-table/bootstrap-table.js') }}" type="text/javascript"></script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Bootstrap Table</h1>
        </div>
        <div class="row">
            <div class="col-md-6">
				<h3>Basic</h3>
				<table data-toggle="table">
				    <thead>
					    <tr>
					        <th>Item ID</th>
					        <th>Item Name</th>
					        <th>Item Price</th>
					    </tr>
				    </thead>
				    <tbody>
					    <tr>
					        <td>1</td>
					        <td>Item 1</td>
					        <td>$1</td>
					    </tr>
					    <tr>
					        <td>2</td>
					        <td>Item 2</td>
					        <td>$2</td>
					    </tr>
					    <tr>
					        <td>3</td>
					        <td>Item 3</td>
					        <td>$3</td>
					    </tr>
					    <tr>
					        <td>4</td>
					        <td>Item 4</td>
					        <td>$4</td>
					    </tr>
					    <tr>
					        <td>5</td>
					        <td>Item 5</td>
					        <td>$5</td>
					    </tr>
				    </tbody>
				</table>
            </div>
            <div class="col-md-6">
				<h3>Sort</h3>
				<table data-toggle="table" data-sort-name="name" data-sort-order="desc">
				    <thead>
					    <tr>
					        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
					        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
					        <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
					    </tr>
				    </thead>
				    <tbody>
					    <tr>
					        <td>1</td>
					        <td>Item 1</td>
					        <td>$1</td>
					    </tr>
					    <tr>
					        <td>2</td>
					        <td>Item 2</td>
					        <td>$2</td>
					    </tr>
					    <tr>
					        <td>3</td>
					        <td>Item 3</td>
					        <td>$3</td>
					    </tr>
					    <tr>
					        <td>4</td>
					        <td>Item 4</td>
					        <td>$4</td>
					    </tr>
					    <tr>
					        <td>5</td>
					        <td>Item 5</td>
					        <td>$5</td>
					    </tr>
				    </tbody>
				</table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
				<h3>Basic JSON</h3>
				<table data-toggle="table" data-url="{{ asset('bundles/applicationbootstrap/files/bootstrap-table/data1.json') }}" data-cache="false">
				    <thead>
					    <tr>
					        <th data-field="id">Item ID</th>
					        <th data-field="name">Item Name</th>
					        <th data-field="price">Item Price</th>
					    </tr>
				    </thead>
				</table>
			</div>
			<div class="col-md-6">
				<h3>Sort JSON</h3>
				<table data-toggle="table" data-url="{{ asset('bundles/applicationbootstrap/files/bootstrap-table/data1.json') }}" data-cache="false" data-sort-name="id" data-sort-order="asc">
				    <thead>
					    <tr>
					        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
					        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
					        <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
					    </tr>
				    </thead>
				</table>
			</div>
		</div>
        <div class="page-header">
          <h3>Table Toolbar</h3>
        </div>
		<div class="row">
            <div class="col-md-12">
				<table data-toggle="table" data-url="{{ asset('bundles/applicationbootstrap/files/bootstrap-table/data1.json') }}" data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">
				    <thead>
					    <tr>
					        <th data-field="state" data-radio="true">Item ID</th>
					        <th data-field="id" data-align="right">Item ID</th>
					        <th data-field="name" data-align="center">Item Name</th>
					        <th data-field="price" data-align="left">Item Price</th>
					    </tr>
				    </thead>
				</table>
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}